<template>
<transition name="fade">
  <div class="box">
    <header class="vip-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>会员中心</span>
    </header>
    <div class="vip-content">
      <div class="vip-content-banner">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(items, idx) of bannerlist" :key="idx">
          <img :src="items.img" alt=""/>
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="vip-content-bottom">
        <ul class="vip-content-bottom-three">
          <li>
            <span class="iconfont icon-jifen2"></span>
            <span>我的积分</span>
          </li>
          <li>
            <span class="iconfont icon-qiandao1"></span>
            <span>每日签到</span>
          </li>
          <li>
            <span class="iconfont icon-jiangpin1"></span>
            <span>我的奖品</span>
          </li>
        </ul>
        <div class="vip-content-bottom-txt">
          <span>时光会员</span>
          <span>专享好货</span>
        </div>
        <ol class="vip-content-bottom-ol">
          <li v-for="(proitem, proidx) of prolist" :key="proidx">
              <div class="pro">
                <img :src="proitem.pimg"/>
              </div>
              <p>{{proitem.pname}}</p>
              <p>{{proitem.pdesc}}</p>
              <p>￥{{proitem.pprice}}</p>
          </li>
        </ol>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'
import { Swipe, SwipeItem, Lazyload } from 'mint-ui'
Vue.use(Swipe, SwipeItem, Lazyload)
export default {
  data () {
    return {
      list: [
        {
          path: '/mine',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      bannerlist: [
        {
          img: 'https://tgi1.jia.com/119/624/19624632.jpg'
        },
        {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545578442&di=44e1b81b91a0648b6453c87799e79522&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202235652_yPUrc.jpeg'
        },
        {
          img: 'https://f10.baidu.com/it/u=1521485790,2088363864&fm=76'
        },
        {
          img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3500789092,2081752988&fm=200&gp=0.jpg'
        }
      ],
      prolist: [
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i3/1050808754/O1CN01dcPsmS2EXNduRZAtW_!!1050808754.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i1/3043279553/O1CN01WmnyRR2KRK6HyxUIp_!!3043279553.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i3/1663211965/TB2Z95irKySBuNjy1zdXXXPxFXa_!!1663211965.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i2/2776405965/O1CN011tw10KS4slzLnXc_!!2776405965.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i3/2938384953/O1CN01a7yhOS1mSWBnX2Onb_!!2938384953.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        },
        {
          pimg: 'https://img.alicdn.com/bao/uploaded/i3/1639468307/O1CN012BEeafkjw9Bw8oK_!!1639468307.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9'
        }
      ]
    }
  },
  created () {
    let data = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst'
    }
    axios({
      method: 'post',
      url: 'http://10.8.162.12:8081/vipcenter.do',
      data: Qs.stringify(data)
    })
      .then((res) => {
        console.log(res)
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<style lang="scss">
// 头部
.vip-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:rgb(252, 218, 218);
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.14rem;
     float:left;
     margin-left:0.15rem;
     font-weight: 700;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
      margin-left:1.3rem;
    }
  }
}
// 聊天部分
.vip-content{
    flex:1;
    position: relative;
    overflow-y:auto;
  .vip-content-banner{
    width:3.75rem;
    height:2rem;
    .mint-swipe{
      width:3.75rem;
      height:2rem;
      .mint-swipe-item{
        img{
         width:100%;
         height:100%
       }
     }
   }
  }
  .vip-content-bottom{
    overflow-y:scroll;
    display:block;
    min-height:5.36rem;
    background:rgb(240, 239, 239);
    .vip-content-bottom-three{
      position: absolute;
      width:3.51rem;
      height:1rem;
      background:#A6CFEF;
      border-radius: 0.12rem;
      margin-left:0.12rem;
      margin-top:-0.12rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      li{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width:0.94rem;
        height:0.85rem;
        color: rgb(255, 255, 255);
        span:nth-child(1){
          font-size:0.4rem;
        }
        span:nth-child(2){
          font-size:0.14rem;
        }
      }
    }
    .vip-content-bottom-txt{
      display: flex;
      justify-content: space-around;
      align-items: center;
      width:1.94rem;
      height:0.3rem;
      background:rgb(213, 210, 230);
      margin-top:1.08rem;
      margin-left:0.91rem;
      font-size:0.18rem;
      font-weight:700
    }
    .vip-content-bottom-ol{
      width:3.51rem;
      min-height:2.26rem;
      background:0;
      margin-left:0.12rem;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      li{
        width:1.5rem;
        height:2.26rem;
        background:#FFFFFF;
        margin-top:0.12rem;
      .pro{
           width:1.5rem;
           height:1.5rem;
           background:rgb(155, 38, 25);
           img{
               width:100%;
               height:100%
             }
          }
      p {
        text-indent: 0.08rem;
      }
       p:nth-of-type(1){
         margin-top: 0.05rem;
           height:0.25rem;
           line-height:0.3rem;
           font-size:0.14rem;
           color: rgb(56, 56, 56);
        }
       p:nth-of-type(2),p:nth-of-type(3){
          height:0.2rem;
          line-height:0.2rem;
          font-size:0.12rem;
          color: rgb(116, 116, 116);
        }
        p:nth-of-type(3){
          color: rgb(250, 106, 106);
        }
      }
    }
  }
}
</style>
